<!-- 还款查询 -->
<template>
	<view class="repay-box">
		<view class="repay-box-table">
			<view class="repay-box-thead">
				<view class="repay-box-th">放款机构</view>
				<view class="repay-box-th text-r">到期日期</view>
				<view class="repay-box-th">融资金额</view>
				<view class="repay-box-th text-r">还款状态</view>
			</view>
			<view class="repay-box-tr-box" v-for="tr in tableList" :key="tr.id">
				<view v-if="tr.status == '0'">
					<view class="repay-box-tr ">
						<view class="repay-box-td ">{{tr.bank}}</view>
						<view class="repay-box-td text-r ">{{tr.date}}</view>
						<view class="repay-box-td ">
							{{tr.money | unitConverter}}
						</view>
						<view class="repay-box-td text-r ">
							<view
							    @tap="repayment"
								:class="tr.status=='1'?'text-color-error':tr.status=='2'?'text-color-info':'text-color-default'">
								{{valueToName(tr.status,statusList)}} <uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
					</view>
					<view class="text-r text-color-success td-text-link" @tap="toRepay(tr)">
						<text>去还款 > </text>
					</view>
				</view>
				<view v-else>
					<view class="repay-box-tr">
						<view class="repay-box-td " :class="tr.status=='1'?'text-color-error font-b':''">{{tr.bank}}
						</view>
						<view class="repay-box-td text-r" :class="tr.status=='1'?'text-color-error font-b':''">
							{{tr.date}}
						</view>
						<view class="repay-box-td" :class="tr.status=='1'?'text-color-error font-b':''">
							{{tr.money | unitConverter}}
						</view>
						<view class="repay-box-td text-r" :class="tr.status=='1'?'text-color-error':''">
							<view
								:class="tr.status=='1'?'text-color-error':tr.status=='2'?'text-color-info':'text-color-default'">
								{{valueToName(tr.status,statusList)}} <uni-icons type="right" size="12"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						id: '001',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '0'
					},
					{
						id: '002',
						bank: '邮储银行',
						date: '2022-01-01',
						money: 2000,
						status: '0'
					},
					{
						id: '003',
						bank: '华润银行',
						date: '2022-01-01',
						money: 2000,
						status: '0',
					},
					{
						id: '004',
						bank: '中信银行',
						date: '2022-01-01',
						money: 2000,
						status: '0'
					},
					{
						id: '005',
						bank: '中国银行',
						date: '2022-01-01',
						money: 2000,
						status: '1'
					},
					{
						id: '006',
						bank: '邮储银行',
						date: '2022-01-01',
						money: 2000,
						status: '2'
					},
					{
						id: '007',
						bank: '华润银行',
						date: '2022-01-01',
						money: 2000,
						status: '2',
						remark: '拒绝原因：资料上传不全不全'
					},
					{
						id: '008',
						bank: '中信银行',
						date: '2022-01-01',
						money: 2000,
						status: '2'
					}

				],
				statusList: [{
						id: '0',
						text: '还款中'
					},
					{
						id: '1',
						text: '逾期'
					},
					{
						id: '2',
						text: '已结清'
					}
				]
			}
		},
		methods: {

			valueToName(val, list = []) {
				let name = '';
				if (val && list.length) {
					for (let i = 0; i < list.length; i++) {
						if (list[i].id == val) {
							name = list[i].text
							return name;
						}
					}
				}
				return name
			},
			toRepay(item) {
				// TODO:去还款
				uni.navigateTo({
					url: '/pages/clt/repayApplyDetails'
				});
			},
			repayment() {
				// 还款中
				uni.navigateTo({
					url: '/pages/clt/financingDetails'
				});
			}
		}
	}
</script>

<style>
	.repay-box {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
		padding: 24rpx 0;
	}

	.repay-box-table {
		margin: 0 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 16rpx 110rpx;
		box-sizing: border-box;
	}

	.repay-box-thead {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: solid 1rpx #EFEFEF;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.repay-box-tr-box {
		border-bottom: solid 1rpx #EFEFEF;
	}

	.repay-box-tr-box:last-child {
		border: none;
	}

	.repay-box-tr {
		min-height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		text-align: center;
	}


	.repay-box-th {
		width: 25%;
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
	}

	.repay-box-td {
		width: 25%;
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
	}

	.td-text-link {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		text-align: right;
		font-weight: 400;
		margin-bottom: 23rpx;
	}
</style>